<template>
	<el-main>
		<el-card shadow="never" header="分类筛选器">
			<sc-select-filter :data="data" :selected-values="selectedValues" :label-width="80"
				@on-change="change"></sc-select-filter>
		</el-card>
		<el-card shadow="never" header="返回值" style="margin-top: 15px;">
			<pre>{{ filterData }}</pre>
		</el-card>
	</el-main>
</template>

<script>
import scSelectFilter from '@renderer/components/scSelectFilter'

export default {
	name: 'selectFilter',
	components: {
		scSelectFilter
	},
	data() {
		return {
			data: [
				{
					title: "状态(单)",
					key: "state",
					options: [
						{
							label: "全部",
							value: ""
						},
						{
							label: "待审核",
							value: "1",
							icon: "el-icon-flag"
						},
						{
							label: "已退回",
							value: "2",
							icon: "el-icon-bottom-left"
						},
						{
							label: "已关闭",
							value: "3",
							icon: "el-icon-circle-close"
						},
						{
							label: "已完成",
							value: "4",
							icon: "el-icon-checked"
						}
					]
				},
				{
					title: "类型(多)",
					key: "type",
					multiple: true,
					options: [
						{
							label: "全部",
							value: ""
						},
						{
							label: "请假申请",
							value: "1"
						},
						{
							label: "加班申请",
							value: "2"
						}
					]
				}
			],
			selectedValues: {
				state: [""],
				type: [""]
			},
			filterData: {}
		}
	},
	mounted() {

	},
	methods: {
		change(selected) {
			this.filterData = selected
		}
	}
}
</script>

<style></style>
